<template>
	<div ref="monthBox">
		<!-- <scroller >   -->
		<div class="month-box">
			<div v-for="(months, index) in allMonth" :key="index" class="month-panel">
				<div class="month-title">{{ months.currentYear }}年 {{ months.currentMonth }}月</div>
				<!-- 星期 -->
				<ul class="weekdays">
					<li style="color: #ed4014">日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li style="color: #ed4014">六</li>
				</ul>
				<ul class="days">
					<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
					<li v-for="(dayobject, i) in months.month" :key="i">
						<!--本月-->
						<!--如果不是本月  改变类名加灰色-->
						<!--如果是本月  还需要判断是不是这一天-->
						<span v-if="dayobject.day.getMonth() + 1 == months.currentMonth">
							<!--今天  同年同月同日-->
							<span
								v-if="dayobject.day.getTime() == activeDays[0]"
								:class="dayobject.day.getTime() == activeDays[0] ? 'active' : 'normal'"
								@click="pickDate(dayobject.day)"
							>
								<span>{{ dayobject.day.getDate() }}</span>
								<span v-if="dayobject.icon == 1" class="restDay">休</span>
								<span v-if="dayobject.icon == 2" class="overtime noBorder">班</span>
								<span v-if="kind == 2" class="lunar">入住</span>
								<span v-else-if="kind == 1" class="lunar">出发</span>
								<span v-else-if="kind == 3" class="lunar">出差</span>
							</span>
							<!-- <span @click="pickDate(dayobject.day)" v-else-if="dayobject.day.getTime()==activeDays[0]&&kind==1"  :class="dayobject.day.getTime()==activeDays[0]?'active':'normal'">
                  <span>{{ dayobject.day.getDate() }}</span>
                  <span class="restDay" v-if="dayobject.icon==1">休</span>
                  <span class="overtime noBorder" v-if="dayobject.icon==2">班</span>
                  <span class="lunar">出发</span>
                </span> -->
							<span
								v-else-if="dayobject.day.getTime() == activeDays[1]"
								:class="dayobject.day.getTime() == activeDays[1] ? 'active' : 'normal'"
								@click="pickDate(dayobject.day)"
							>
								<span>{{ dayobject.day.getDate() }}</span>
								<span v-if="dayobject.icon == 1" class="restDay">休</span>
								<span v-if="dayobject.icon == 2" class="overtime noBorder">班</span>
								<span v-if="kind == 2" class="lunar">离店</span>
								<span v-else-if="kind == 3" class="lunar">返回</span>
							</span>
							<span
								v-else-if="dayobject.day.getTime() == new Date(formatDateTime(new Date(), 'yyyy-MM-dd')).getTime()"
								:class="
									dayobject.day.getTime() < new Date(formatDateTime(new Date(), 'yyyy-MM-dd')).getTime() ||
									(tripBeginTime && dayobject.day.getTime() < tripBeginTime.getTime()) ||
									(tripEndTime && dayobject.day.getTime() > tripEndTime.getTime())
										? 'disabled-date'
										: dayobject.day.getTime() == activeDays[0] || dayobject.day.getTime() == activeDays[1]
										? 'active'
										: dayobject.lunar.isLunarFestival || dayobject.lunar.isGregorianFestival
										? 'festival'
										: isToday
										? 'today'
										: 'normal'
								"
								@click="pickDate(dayobject.day)"
							>
								<span>{{ dayobject.day.getDate() }}</span>
								<span v-if="dayobject.icon == 1" class="restDay">休</span>
								<span v-if="dayobject.icon == 2" class="overtime">班</span>
								<span class="lunar">{{
									dayobject.lunar.isLunarFestival
										? dayobject.lunar.isLunarFestival
										: dayobject.lunar.isGregorianFestival
										? dayobject.lunar.isGregorianFestival
										: ""
								}}</span>
								<!-- <span class="lunar">{{dayobject.lunar.isLunarFestival?dayobject.lunar.isLunarFestival:dayobject.lunar.isGregorianFestival?dayobject.lunar.isGregorianFestival:'今天'}}</span> -->
							</span>
							<span
								v-else-if="
									dayobject.day.getTime() < new Date(formatDateTime(new Date(), 'yyyy-MM-dd')).getTime() ||
									(tripBeginTime && dayobject.day.getTime() < tripBeginTime.getTime()) ||
									(tripEndTime && dayobject.day.getTime() > tripEndTime.getTime())
								"
								class="disabled-date"
								@click="pickDate(dayobject.day)"
							>
								<span>{{ dayobject.day.getDate() }}</span>
								<span v-if="dayobject.icon == 2" class="overtime">班</span>
								<span v-if="dayobject.icon == 1" class="restDay">休</span>
								<span class="lunar">{{
									dayobject.lunar.isLunarFestival
										? dayobject.lunar.isLunarFestival
										: dayobject.lunar.isGregorianFestival
										? dayobject.lunar.isGregorianFestival
										: ""
								}}</span>
								<!-- <span class="lunar">{{dayobject.lunar.isLunarFestival?dayobject.lunar.isLunarFestival:dayobject.lunar.isGregorianFestival?dayobject.lunar.isGregorianFestival:dayobject.lunar.lunar.IDayCn}}</span> -->
							</span>
							<span
								v-else-if="dayobject.day.getTime() < activeDays[1] && dayobject.day.getTime() > activeDays[0]"
								:class="
									dayobject.day.getTime() < activeDays[1] && dayobject.day.getTime() > activeDays[0]
										? dayobject.lunar.isLunarFestival || dayobject.lunar.isGregorianFestival
											? 'festival active-during'
											: 'active-during'
										: ''
								"
								@click="pickDate(dayobject.day)"
							>
								<span>{{ dayobject.day.getDate() }}</span>
								<span v-if="dayobject.icon == 2" class="overtime">班</span>
								<span v-if="dayobject.icon == 1" class="restDay">休</span>
								<span class="lunar">{{
									dayobject.lunar.isLunarFestival
										? dayobject.lunar.isLunarFestival
										: dayobject.lunar.isGregorianFestival
										? dayobject.lunar.isGregorianFestival
										: ""
								}}</span>
								<!-- <span class="lunar">{{dayobject.lunar.isLunarFestival?dayobject.lunar.isLunarFestival:dayobject.lunar.isGregorianFestival?dayobject.lunar.isGregorianFestival:dayobject.lunar.lunar.IDayCn}}</span> -->
							</span>
							<span
								v-else
								:class="
									dayobject.day.getTime() == activeDays[0] || dayobject.day.getTime() == activeDays[1]
										? 'active'
										: dayobject.lunar.isLunarFestival || dayobject.lunar.isGregorianFestival
										? 'festival'
										: 'normal'
								"
								@click="pickDate(dayobject.day)"
							>
								<span>{{ dayobject.day.getDate() }}</span>
								<span v-if="dayobject.icon == 2" class="overtime">班</span>
								<span v-if="dayobject.icon == 1" class="restDay">休</span>
								<span class="lunar">{{
									dayobject.lunar.isLunarFestival
										? dayobject.lunar.isLunarFestival
										: dayobject.lunar.isGregorianFestival
										? dayobject.lunar.isGregorianFestival
										: ""
								}}</span>
								<!-- <span class="lunar">{{dayobject.lunar.isLunarFestival?dayobject.lunar.isLunarFestival:dayobject.lunar.isGregorianFestival?dayobject.lunar.isGregorianFestival:dayobject.lunar.lunar.IDayCn}}</span> -->
							</span>
						</span>
					</li>
				</ul>
			</div>
		</div>
		<!-- </scroller>  -->
		<Alert v-model="showVerifyAlert" :text="alertText" :left-btn="'联系客服'" :right-btn="'我知道了'" />
	</div>
</template>
<script>
/* eslint-disable */

import calendar from "./calendar.js";
import Alert from "./Alert";
import formatDateTime from "./formatDateTime";
export default {
	components: {
		Alert,
	},
	props: {
		value: {
			type: Array,
			default: [],
		},
		startTime: {
			type: String,
			default: "",
		},
		endTime: {
			type: String,
			default: "",
		},
		kind: {
			type: Number,
			default: 1,
		},
	},
	data() {
		return {
			isTrip: 1,
			days: [],
			// yearCount:0,
			activeDays: [],
			allMonth: [],
			changeYear: 2018,
			changeMonth: 7,
			isFirst: true,
			calendar: false,
			pickCount: 0,
			isToday: true,
			value1: [],
			monthCount: 12,
			showVerifyAlert: false,
			alertText: "请在正确的时间范围内选择",
			festival: {
				lunar: {
					"1-1": "春节",
					"1-15": "元宵节",
					"2-2": "龙抬头",
					"5-5": "端午节",
					"7-7": "七夕节",
					"7-15": "中元节",
					"8-15": "中秋节",
					"9-9": "重阳节",
					"10-1": "寒衣节",
					"10-15": "下元节",
					"12-8": "腊八节",
					"12-23": "祭灶节",
				},
				gregorian: {
					"1-1": "元旦",
					"2-14": "情人节",
					"3-8": "妇女节",
					"3-12": "植树节",
					"4-5": "清明节",
					"5-1": "劳动节",
					"5-4": "青年节",
					"6-1": "儿童节",
					"7-1": "建党节",
					"8-1": "建军节",
					"9-10": "教师节",
					"10-1": "国庆节",
					"12-24": "平安夜",
					"12-25": "圣诞节",
				},
			},
			icon: {
				restday: [
					"2018-12-30",
					"2018-12-31",
					"2019-01-01",
					"2019-01-01",
					"2019-02-04",
					"2019-02-05",
					"2019-02-06",
					"2019-02-07",
					"2019-02-08",
					"2019-02-09",
					"2019-02-10",
					"2019-04-05",
					"2019-04-06",
					"2019-04-07",
					"2019-04-29",
					"2019-04-30",
					"2019-05-01",
					"2019-06-07",
					"2019-06-08",
					"2019-06-09",
					"2019-09-13",
					"2019-09-14",
					"2019-09-15",
					"2019-10-01",
					"2019-10-02",
					"2019-10-03",
					"2019-10-04",
					"2019-10-05",
					"2019-10-06",
					"2019-10-07",
				],
				overtimeday: ["2019-02-02", "2019-02-03", "2019-04-27", "2019-04-28", "2019-09-29", "2019-10-12"],
			},
		};
	},
	computed: {
		tripBeginTime() {
			if (this.startTime == "") return new Date(this.formatDateTime(new Date(), "yyyy-MM-dd"));
			else return new Date(this.formatDateTime(new Date(this.startTime), "yyyy-MM-dd"));
		},
		tripEndTime() {
			if (this.endTime == "") {
				const date = this.formatDateTime(new Date(), "yyyy-MM-dd");
				const d = date.split("-");
				return new Date(parseInt(d[0]) + 1, parseInt(d[1]) - 1, d[2]);
			} else {
				return new Date(this.formatDateTime(new Date(this.endTime), "yyyy-MM-dd"));
			}
		},
	},
	watch: {
		visible(val) {
			this.calendar = val;
		},
		value1() {
			this.activeDays = [];
			for (let i = 0; i < this.value1.length; i++) this.activeDays.push(new Date(this.value1[i]).getTime());
		},
		value(val) {
			for (let i = 0; i < val.length; i++) {
				this.activeDays = [];
				this.activeDays.push(new Date(val[i]).getTime());
			}
		},
	},
	created() {
		// 在vue初始化时调用
		if (this.kind == 1) {
			if (this.tripBeginTime && new Date(this.tripBeginTime).getTime() > new Date().getTime()) {
				if (this.value.length > 0) {
					if (new Date(this.value[0]).getTime() > new Date(this.tripBeginTime).getTime()) {
						this.activeDays[0] = new Date(this.value[0]).getTime();
						this.value1 = [];
						this.value1.push(this.formatDateTime(new Date(this.value[0]), "yyyy-MM-dd"));
					} else {
						this.activeDays[0] = new Date(this.tripBeginTime).getTime();
						this.value1 = [];
						this.value1.push(this.formatDateTime(new Date(this.tripBeginTime), "yyyy-MM-dd"));
					}
				} else {
					this.activeDays[0] = new Date(this.tripBeginTime).getTime();
					this.value1 = [];
					this.value1.push(this.formatDateTime(new Date(this.tripBeginTime), "yyyy-MM-dd"));
				}
			} else {
				if (this.value.length > 0 && new Date(this.value[0]).getTime() > new Date().getTime()) {
					this.activeDays[0] = new Date(this.value[0]).getTime();
					this.value1 = [];
					this.value1.push(this.formatDateTime(new Date(this.value[0]), "yyyy-MM-dd"));
				} else {
					this.activeDays[0] = new Date(this.formatDateTime(new Date(), "yyyy-MM-dd")).getTime();
					this.value1 = [];
					this.value1.push(this.formatDateTime(new Date(), "yyyy-MM-dd"));
				}
			}
		} else {
			if (this.tripBeginTime && new Date(this.tripBeginTime).getTime() > new Date().getTime()) {
				if (
					this.value.length == 2 &&
					new Date(this.value[0]).getTime() >= new Date(this.tripBeginTime).getTime() &&
					new Date(this.value[1]).getTime() > new Date(this.tripBeginTime).getTime()
				) {
					if (new Date(this.value[0]).getTime() > new Date(this.value[1]).getTime()) {
						let tmp = this.value[0];
						let tmp1 = this.value[1];
						this.value1 = [];
						this.value1.push(tmp1);
						this.value1.push(tmp);
					}
					this.activeDays[0] = new Date(this.value[0]).getTime();
					this.activeDays[1] = new Date(this.value[1]).getTime();
				} else {
					this.activeDays[0] = new Date(this.tripBeginTime).getTime();
					this.activeDays[1] = new Date(new Date(this.tripBeginTime).getTime() + 86400000).getTime();
					this.value1 = [];
					this.value1.push(this.formatDateTime(new Date(this.tripBeginTime), "yyyy-MM-dd"));
					this.value1.push(this.formatDateTime(new Date(new Date(this.tripBeginTime).getTime() + 86400000), "yyyy-MM-dd"));
				}
			} else {
				this.activeDays[0] = new Date(this.formatDateTime(new Date(), "yyyy-MM-dd")).getTime();
				this.activeDays[1] = new Date(this.formatDateTime(new Date().getTime() + 86400000, "yyyy-MM-dd")).getTime();
				this.value1 = [];
				this.value1.push(this.formatDateTime(new Date(), "yyyy-MM-dd"));
				this.value1.push(this.formatDateTime(new Date().getTime() + 86400000, "yyyy-MM-dd"));
			}
		}
		this.$emit("input", this.value1);
		this.getAllMonth();
	},
	mounted() {
		// 为了解决划不动
		const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
		document.getElementsByClassName("month-box")[0].style.height = clientHeight + "px";
	},
	methods: {
		showCalendar() {
			this.calendar = true;
		},
		getAllMonth() {
			for (let i = 0; i < 13; i++) {
				if (i == 0) {
					this.initData(null);
				} else {
					let d = new Date(this.formatDate(this.changeYear, this.changeMonth, 1));
					d.setDate(42);
					this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
				}
			}
		},
		initData(cur) {
			let date;
			if (cur) {
				date = new Date(cur);
			} else {
				let now = new Date();
				var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
				d.setDate(42);
				date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
			}
			let currentDay = date.getDate();
			let currentYear = date.getFullYear();
			let currentMonth = date.getMonth() + 1;
			let currentWeek = date.getDay(); // 1...6,0
			this.changeYear = date.getFullYear();
			this.changeMonth = date.getMonth() + 1;
			if (currentWeek == 0) {
				currentWeek = 7;
			}
			let str = this.formatDate(currentYear, currentMonth, currentDay);
			this.days.length = 0;
			let thisMonth = [];
			// 今天是周日，放在第一行第7个位置，前面6个
			// 初始化本周
			for (var i = currentWeek; i >= 0; i--) {
				var d = new Date(str);
				d.setDate(d.getDate() - i);
				var dayobject = {}; // 用一个对象包装Date对象  以便为以后预定功能添加属性
				dayobject.day = d;
				dayobject.lunar = this.getLunarInfo(d.getFullYear(), d.getMonth() + 1, d.getDate());
				dayobject.icon = this.getIconInfo(formatDateTime(d, "yyyy-MM-dd"));
				this.days.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
				thisMonth.push(dayobject);
			}
			// 其他周
			for (var i = 1; i <= 42 - currentWeek; i++) {
				var d = new Date(str);
				d.setDate(d.getDate() + i);
				var dayobject = {};
				dayobject.day = new Date(formatDateTime(d, "yyyy-MM-dd"));
				dayobject.icon = this.getIconInfo(formatDateTime(d, "yyyy-MM-dd"));
				dayobject.lunar = this.getLunarInfo(d.getFullYear(), d.getMonth() + 1, d.getDate());
				this.days.push(dayobject);
				thisMonth.push(dayobject);
			}
			let monthObj = {
				month: [],
				currentMonth: currentMonth,
				currentYear: currentYear,
			};
			monthObj.month = thisMonth;
			this.allMonth.push(monthObj);
		},
		formatDate(year, month, day, showIndex) {
			let y = year;
			let m = month;
			if (m == 0) {
				m = 1;
			}
			if (m < 10) m = "0" + m;
			let d = day;
			if (d < 10) d = "0" + d;
			if (showIndex == 666) {
				return y + "年" + m + "月" + d + "日";
			} else {
				return y + "-" + m + "-" + d;
			}
		},
		formatDateTime(datetime, fmt) {
			if (typeof datetime === "string") {
				datetime = datetime.replace(/-/g, "/");
				datetime = datetime.replace("T", " ");
			}
			datetime = new Date(datetime);
			let o = {
				"M+": datetime.getMonth() + 1, // 月份
				"d+": datetime.getDate(), // 日
				"h+": datetime.getHours(), // 小时
				"m+": datetime.getMinutes(), // 分
				"s+": datetime.getSeconds(), // 秒
				"q+": Math.floor((datetime.getMonth() + 3) / 3), // 季度
				S: datetime.getMilliseconds(), // 毫秒
				"D+": formatDay(datetime.getDay()), // 周几
			};
			function formatDay(num) {
				switch (num) {
					case 0:
						return "周日";
					case 1:
						return "周一";
					case 2:
						return "周二";
					case 3:
						return "周三";
					case 4:
						return "周四";
					case 5:
						return "周五";
					case 6:
						return "周六";
				}
			}
			if (/(y+)/.test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
			}
			for (let k in o) {
				if (new RegExp("(" + k + ")").test(fmt)) {
					fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
				}
			}
			return fmt;
		},
		getLunarInfo(y, m, d) {
			const lunarInfo = calendar.solar2lunar(y, m, d);
			let lunarValue = lunarInfo.IDayCn;
			let isLunarFestival = false;
			let isGregorianFestival = false;
			if (this.festival.lunar[lunarInfo.lMonth + "-" + lunarInfo.lDay] != undefined) {
				lunarValue = this.festival.lunar[lunarInfo.lMonth + "-" + lunarInfo.lDay];
				isLunarFestival = true;
			} else if (this.festival.gregorian[m + "-" + d] != undefined) {
				lunarValue = this.festival.gregorian[m + "-" + d];
				isGregorianFestival = true;
			}
			if (lunarInfo.IDayCn == "初一") {
				lunarInfo.IDayCn = lunarInfo.IMonthCn;
			}
			return {
				lunar: lunarInfo,
				isLunarFestival: isLunarFestival ? lunarValue : false,
				isGregorianFestival: isGregorianFestival ? lunarValue : false,
			};
		},
		getIconInfo(time) {
			if (this.icon.restday.indexOf(time) >= 0) {
				return 1;
			} else if (this.icon.overtimeday.indexOf(time) >= 0) {
				return 2;
			}
			return 0;
		},
		pickDate(date) {
			event.stopPropagation();
			if (
				date.getTime() < this.tripBeginTime.getTime() ||
				date.getTime() > this.tripEndTime.getTime() ||
				date.getTime() < new Date(this.formatDateTime(new Date(), "yyyy-MM-dd")).getTime()
			) {
				return;
			}
			if (this.kind > 1) {
				if (this.isFirst) {
					this.value1 = [];
					this.activeDays = [];
				}
				this.value1.push(this.formatDateTime(new Date(date), "yyyy-MM-dd"));
				if (new Date(this.value1[0]).getTime() >= new Date(this.value1[1]).getTime()) {
					const temp = this.value1[1];
					this.value1 = [];
					this.value1.push(temp);
				}
				for (let i = 0; i < this.value1.length; i++) {
					this.activeDays[i] = new Date(this.value1[i]).getTime();
				}
				let span = document.querySelectorAll(".days>li>span>span");
				for (let i = 0; i < span.length; i++) {
					if (span[i].id < this.activeDays[1] && span[i].id > this.activeDays[0]) {
						span[i].className = "active-during";
					}
				}
				setTimeout(() => {
					if (this.value1.length > 1) {
						this.pickCount = 0;
						this.isFirst = true;
						this.isToday = true;
						this.$emit("changeDate", this.value1);
						this.$emit("input", this.value1);
					} else {
						this.isFirst = false;
					}
				}, 300);
			} else {
				this.activeDays = [];
				this.value1 = [];
				this.value1.push(this.formatDateTime(new Date(date), "yyyy-MM-dd"));
				this.activeDays.push(new Date(date).getTime());
				setTimeout(() => {
					this.$emit("input", this.value1);
					this.$emit("changeDate", this.value1);
				}, 300);
			}
		},
	},
};
</script>
<style>
span {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
}
.date-box {
	width: 280px;
	height: 33px;
	border: 1px solid #2998ff;
	line-height: 33px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 40px;
	font-size: 14px;
	color: #2998ff;
}
.month-box {
	position: relative;
	width: 100%;
	/* overflow:auto; */
	/* 解决划不动 */
	overflow-y: scroll;
}
.weekdays {
	margin: 10px 0 0 0;
	width: 100%;
	padding: 10px 0;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	color: #2998ff;
	justify-content: space-around;
	font-size: 14px;
}

.weekdays li {
	display: inline-block;
	width: 14.28%;
	height: 53px;
	text-align: center;
}

.days {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.days li {
	list-style-type: none;
	display: inline-block;
	padding-bottom: 2px;
	padding-top: 2px;
	width: 14.285%;
	height: 14.285%;
	text-align: center;
	font-size: 14px;
	color: #333;
}
.days li > span {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-weight: 600;
}
.days li > span > span {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	font-weight: 600;
}
.days li > span > span > span {
	display: block;
	width: 100%;
	height: 21px;
	line-height: 21px;
	font-weight: 600;
}
.lunar {
	font-size: 0.75rem;
	height: 18px;
	/* color: #19be6b; */
}
.restDay {
	position: absolute;
	border: 1px solid;
	top: 1px;
	right: 1px;
	font-size: 0.55rem;
	color: #2998ff !important;
	background: #fff !important;
	line-height: 14px !important;
	width: 12px !important;
	height: 12px !important;
}
.overtime {
	position: absolute;
	border: 1px solid #555;
	top: 1px;
	right: 1px;
	font-size: 0.55rem;
	color: #999 !important;
	background: #fff !important;
	line-height: 14px !important;
	width: 12px !important;
	height: 12px !important;
}
.noBorder {
	color: #2998ff !important;
	border: 1px solid #2998ff !important;
}
.days li .active {
	/* border-radius: 15%;
    font-size: 12px; */
	background: #2998ff;
	color: #fff;
}
.days li .active-during {
	/* font-size: 12px; */
	background: rgba(41, 152, 255, 0.1);
}
.days li .festival {
	color: #4289ff;
}
.days li .today {
	color: #2998ff;
}
.days li .other-month {
	padding: 5px;
	color: #999;
	/* //display: none; */
}

.days li .disabled-date {
	color: gainsboro;
}
.month-title {
	text-align: center;
	background: #ffffff;
	font-size: 16px;
	color: #2998ff;
}
.month-panel {
	padding-top: 10px;
	background: #ffffff;
}
</style>
